<template>
	<view class="basics_box">
		<!-- 客户信息 -->
		<view class="user_message">
			<view class="user_message_user utils_patternOne">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">客户信息</text>
						<view class="tips"></view>
					</view>
				</view>
				
				<!-- 客户信息 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<text 
							class="user_content_text" 
							v-for="(item, index) in personTagArray" 
							:key="index">
							{{item.name}}：{{item.value}}
						</text>
						<!-- <text class="user_content_text">手机号：18899992222</text> -->
					</view>
				</view>
			</view>
			<view class="user_message_user utils_patternOne">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">车辆信息</text>
						<view class="tips"></view>
					</view>
				</view>
				
				<!-- 客户信息 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<!-- <text class="user_content_text">车型：比亚迪 汉</text> -->
						<text v-for="(item, index) in carTagArray" :key="index" class="user_content_text">
							{{item.name}}：{{item.value}}
							<text 
								v-if="item.name === '车牌号' && item.value !== '' ? true : false" 
								@tap="handleCopy(item.value)" 
								class="user_cart_copy"
								>
								复制
							</text>
						</text>
						
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data () {
			return {
				personTagArray: [],
				carTagArray: [],
			}
		},
		
		// onLoad (options) {
		// 	this.personTagArray = decodeURIComponent(options.personTagArray)
		// 	this.carTagArray = decodeURIComponent(options.carTagArrayJson)
		// 	console.log('接收客户信息', this.personTagArray)
		// 	console.log('接收车辆信息', this.carTagArray)
			
		// 	// this.vin = options.vin
		// 	// this.taskId = options.taskId
		// 	// this.groupId = options.groupId
		// 	// this.history = options.mode || this.history
		// },
		
		mounted() {
			this.personTagArray = uni.getStorageSync('personTagArray') || this.personTagArray;
			this.carTagArray = uni.getStorageSync('carTagArray') || this.personTagArray;
			
			console.log('客户信息', this.personTagArray)
			console.log('车辆信息', this.carTagArray)
		},
		
		methods: {
			// 复制车架号
			handleCopy(value) {
				console.log('被复制的车架号', value)
				uni.setClipboardData({
					data: value,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
								});
							},
							complete: function(res) {
								console.log('复制车架号res', res)
							}
						});
					},
					complete: function(res) {
						console.log('复制车架号res1023', res)
					}
				});
			},
		}
		
	}
</script>

<style lang="less" scoped>
	.basics_box {
		padding: 24rpx;
		background-image: url('../../../static/byd-img/jiaoji@1x.png');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		height: 100%;
		
		/* 公共样式-内外边距、背景色、边框弧度 */
		.utils_patternOne {
			margin-bottom: 32rpx;
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}
		
		/* 公共样式-区块标题 */
		.utils_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			
			.title_text {
				position: relative;
				font-size: 32rpx;
				font-weight: 500;
				color: #1D2129;
				.title_left_text {
					margin-left: 24rpx;
				}
				.tips {
					position: absolute;
					top: 10rpx;
					left: 0;
					border-radius: 8rpx;
					width: 8rpx;
					height: 24rpx;
					background: #0063FF;
				}
			}
			
			.right_text_title {
				font-size: 24rpx;
				color: #86909C;
			}
		}
		
		/* 客户基础信息 */
		.user_message {
			margin-top: 32rpx;
			.user_message_user {
				.user_message_conetnt {
					// display: flex;
					// flex-wrap: wrap;
					// justify-content: space-between;
					.user_conetnt_item {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						// margin-bottom: 24rpx;
						
						font-family: 思源黑体;
						font-size: 28rpx;
						color: #4E5969;
						
						.user_content_text {	
							// display: flex;
							// align-items: center;
							// flex: 1;
							// margin-right: 70rpx;
							margin-bottom: 24rpx;
							
							.user_cart_copy {
								margin-left: 20rpx;
								color: #0063FF;
							}
						}
						
						&:last-child {
							margin-bottom: 0;
						}
						
					}
				}
			}
		}
		
	}
</style>